<div id="app">
    <p>原始值: {{ message }}</p>

    <!-- 1、插值数据绑定中使用表达式 -->
    <p>反转消息: {{ message.split('').reverse().join('') }}</p>

    <!-- 
    计算属性缓存 vs 方法：
    看起来计算属性和方法能完成相同的功能，那么他们有什么区别呢？
    计算属性基于缓存：在相关依赖发生改变时它们才会重新求值。
    方法将总会再次执行 

    以下代码，计算属性控制台输出一次，而方法输出两次
    -->

    <!-- 2、使用计算属性 -->
    <p>反转消息: {{ reversedMessage }}</p>
    <!-- 调用两次只执行一次属性的计算 -->
    <p>反转消息: {{ reversedMessage }}</p>
    
    <!-- 3、使用方法 -->
    <p>反转消息: {{ reversed() }}</p>
    <!-- 调用两次执行了两次属性的计算 -->
    <p>反转消息: {{ reversed() }}</p>
    
</div>
<script src="./lib/vue-2.6.12.js"></script>
<script>
new Vue({
    el: '#app',
    data: {
        message: 'hello'
    },

    // 所有计算属性都要定义到 computed 节点之下
    // 计算属性定义成“方法格式”
    computed: {
        reversedMessage () {
            console.log('计算属性执行')
            return this.message.split('').reverse().join('')
        }
    },

    // 使用方法
    methods:{
        reversed () {
            console.log('方法执行')
            return this.message.split('').reverse().join('')
        }
    }   

})
</script>